<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/layout' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>系统监控</el-breadcrumb-item>
      <el-breadcrumb-item>IP统计</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片布局 -->
    <el-card>
      <div class="refresh-selector">
        <span>刷新间隔：</span>
        <el-select v-model="refreshInterval" @change="changeRefresh(value)" placeholder="请选择刷新间隔">
          <el-option label="5分钟" value="5"></el-option>
          <el-option label="10分钟" value="10"></el-option>
          <el-option label="30分钟" value="30"></el-option>
          <el-option label="1小时" value="60"></el-option>
          <el-option label="2小时" value="120"></el-option>
        </el-select>

        <el-button title="重置刷新间隔" type="primary" @click="refreshTimer()" style="margin-left: 30px;">
          <el-icon>
            <refresh/>
          </el-icon>
        </el-button>
      </div>
      <div id="container" style="height:500px;">IP进站统计</div>
    </el-card>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import {ElMessage} from 'element-plus';

export default {

  data() {
    this.option={
      title: {
        text: 'IP进站统计'
      },
      tooltip: {
        trigger: 'axis',
        confine: true,
        appendToBody : true,
        position:[10,10],
        formatter: function (params) {
          params = params[0];
          var date = new Date(params.name);
          return (
              date.getDate() +
              '-' +
              (date.getMonth() + 1) +
              '-' +
              date.getFullYear() +
              ' : ' +
              params.value[1]
          )
        },


      },
      xAxis: {
        type: 'time',
        splitLine: {
          show: false
        }
      },
      yAxis: {
        type: 'value',
        boundaryGap: [0, '100%'],
        splitLine: {
          show: false
        }
      },
      series: [
        {
          name: 'Fake Data',
          type: 'line',
          showSymbol: false,
          data: this.data
        }
      ]
    }
    return {
      dom:null,
      myChart: null,
      timerId: null,
      data: [],
      now: new Date(),
      oneDay: 24 * 3600 * 1000,
      value: Math.random() * 10,
      refreshInterval: 1000*60
    };
  },
  methods: {
    initData() {
      for (var i = 0; i < 20; i++) {
        this.data.push(this.randomData());
      }
    },
    randomData() {
      // 现在的时间
      // this.now = new Date(+this.now + this.oneDay);
      this.now = new Date(this.now.getTime()+this.refreshInterval);
      //数据
      this.value = this.value + Math.random() * 21 - 10;
      // console.log([this.now.getHours(), this.now.getMinutes() + 1].join(':'));
      // console.log(this.value);
      return {
        // name: this.now.toString(),
        value: [this.now, Math.round(this.value)],
        name: this.now.toString()
        // value: [[this.now.getHours(), this.now.getMinutes() + 1, this.now.getMinutes()].join('/'), Math.round(this.value)]
      };
    },
    refreshChart() {
      for (var i = 0; i < 1; i++) {
        this.data.shift();
        this.data.push(this.randomData());
      }
      this.myChart.setOption({
        series: [
          {
            data: this.data
          }
        ]
      });
    },
    setRefreshInterval(interval) {
      this.refreshInterval = interval;
      clearInterval(this.timerId);
      this.data=[]
      this.initData()
      this.timerId = setInterval(() => {
        this.refreshChart();
      }, this.refreshInterval);
      ElMessage.success('设置成功');
    },
    changeRefresh() {
      this.refreshInterval *= 1000 * 60;

      this.setRefreshInterval(this.refreshInterval);
    },
    refreshTimer() {
      clearInterval(this.timerId);
      this.refreshInterval = 1000 * 60;

      this.timerId = setInterval(() => {
        this.refreshChart();
      }, this.refreshInterval);
      ElMessage.success('已刷新');
    },
    initCharts(dom){
      this.myChart=echarts.init(dom)
      this.myChart.setOption(this.option);
      window.addEventListener('resize', this.myChart.resize, {passive: true});
    }
  },
  mounted() {
    this.dom = document.getElementById('container');
    this.initCharts(this.dom)
    this.initData();
    this.refreshChart();
    //设置刷新间隔
    this.timerId = setInterval(() => {
      this.refreshChart();
    }, this.refreshInterval);
  },
};
</script>

<style scoped>
div.el-breadcrumb {
  height: 45px;
}

.el-dialog__body {
  padding: 0px 15px;
}

.el-form-item {
  /* height: 68px; */
}

.refresh-selector {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.refresh-selector span {
  margin-right: 10px;
}
</style>
